<template>
  <Popup
      :round="round"
      v-model="visible"
      position="left"
      @click-overlay="handleClose"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      :style="getStyle('popup')"
      :overlay-style="getStyle('overlay')"
  >
    <div class="layer_inside">
      <div class="patient-info" >
        <div class="patient-item current-patient" v-if="info['treatingAlert']">
          <div class="title" v-if="shownTitle(info,'current')">
            {{ info?.current?.content || '就诊' }}
          </div>
          <div class="first-group" :class="getClassName('current')">
            <div class="content-item"
                 v-for="(patientItem,index) in patientSlice('currPatient')"
                 :key="index"
                 :class="`waitPatient-${patientItem?.length}`"
            >
              <template v-for="(item) in patientItem">
                <div class="wait-patient-info">
                  <span class="patient-orderNo" v-if="!!(item.orderNo)">
                    {{ item.orderNo || ' ' }}
                  </span>
                  <span class="patient-name">
                    {{ item.patientName || ' ' }}
                  </span>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="patient-item wait-patient" v-if="(info['waitingAlert'])&&(info['waitPatient']?.length)">
          <div class="title" v-if="shownTitle(info,'waiting')">
            {{ info?.waiting?.content || '候诊' }}
          </div>
          <div class="first-group" :class="getClassName('wait')">
            <div class="content-item"
                 v-for="(patientItem,index) in patientSlice('waitPatient')"
                 :key="index"
                 :class="`waitPatient-${patientItem?.length}`"
            >
              <template v-for="(item) in patientItem">
                <div class="wait-patient-info">
                  <span class="patient-orderNo" v-if="!!(item.orderNo)">
                    {{ item.orderNo || ' ' }}
                  </span>
                  <span class="patient-name">
                    {{ item.patientName || ' ' }}
                  </span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';
import {pxToVw} from "@/utils/common";

export default {
  name: 'CallPatientDrawerLeft',

  componentName: "CallPatientDrawerLeft",

  props: {
    visible: {
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    },
    checkList: {
      type: Array,
      required: true
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
    }
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let {current, waiting, popupBackground, overlayBackground} = (self.info) || Array();
        let Obj = Object();
        switch (val) {
          case 'current':
            if (!!current && Reflect.has(current, 'backgroundColor')) {
              Reflect.set(Obj, 'backgroundColor', (current.backgroundColor));
            }
            if (!!current && Reflect.has(current, 'color')) {
              Reflect.set(Obj, 'color', (current.color));
            }
            if (!!current && Reflect.has(current, 'fontSize')) {
              Reflect.set(Obj, 'fontSize', pxToVw(current.fontSize));
            }
            return Obj;
          case 'currPatient':
            if (!!current && Reflect.has(current, 'patientColor')) {
              Reflect.set(Obj, 'color', (current.patientColor) || 'rgba(0, 89, 179, 1)');
            }
            if (!!current && Reflect.has(current, 'patientFontSize')) {
              Reflect.set(Obj, 'fontSize', pxToVw(current.patientFontSize || 106));
            }
            return Obj;
          case 'currentOrderNo':
            if (!!current && Reflect.has(current, 'patientNumberBackground')) {
              Reflect.set(Obj, 'background', (current.patientNumberBackground));
            }
            if (!!current && Reflect.has(current, 'patientNumberColor')) {
              Reflect.set(Obj, 'color', (current.patientNumberColor));
            }
            return Obj;
          case 'waitPatient':
            if (!!waiting && Reflect.has(waiting, 'patientColor')) {
              Reflect.set(Obj, 'color', (waiting.patientColor) || 'rgba(299, 133, 2, 1)');
            }
            if (!!waiting && Reflect.has(waiting, 'patientFontSize')) {
              Reflect.set(Obj, 'fontSize', pxToVw(waiting.patientFontSize || 106));
            }
            return Obj;
          case 'waiting':
            if (!!waiting && Reflect.has(waiting, 'backgroundColor')) {
              Reflect.set(Obj, 'backgroundColor', (waiting.backgroundColor));
            }
            if (!!waiting && Reflect.has(waiting, 'color')) {
              Reflect.set(Obj, 'color', (waiting.color));
            }
            if (!!waiting && Reflect.has(waiting, 'fontSize')) {
              Reflect.set(Obj, 'fontSize', pxToVw(waiting.fontSize));
            }
            return Obj;
          case 'waitingOrderNo':
            if (!!waiting && Reflect.has(waiting, 'patientNumberBackground')) {
              Reflect.set(Obj, 'background', (waiting.patientNumberBackground));
            }
            if (!!waiting && Reflect.has(waiting, 'patientNumberColor')) {
              Reflect.set(Obj, 'color', (waiting.patientNumberColor));
            }
            return Obj;
          case 'popup':
            Reflect.set(Obj, 'backgroundColor', (popupBackground || `rgba(255, 255, 255, 1)`));
            Reflect.set(Obj, 'height', 'auto');
            Reflect.set(Obj, 'maxHeight', '100%');
            return Obj;
          case 'overlay':
            Reflect.set(Obj, 'backgroundColor', (overlayBackground || `rgba(0, 0, 0, 0.6)`));
            return Obj;
        }
      }
    },

    // 通过数据设置高度
    getClassName() {
      return function (type) {
        let totals = 0;
        if (type === 'current') {
          totals = this.info?.currPatient?.length || 0;
        } else {
          totals = this.info?.waitPatient?.length || 0;
        }
        switch (totals) {
          case 1:
            return 'content-1';
          case 2:
            return 'content-2';
          case 3:
          case 4:
            return 'content-3';
          case 5:
          case 6:
            return 'content-5';
          default:
            return 'content-default'
        }
      }
    },

    //判断字段的数值是false还是null
    shownTitle() {
      return function (info, type) {
        switch (type) {
          case 'current':
            if (info && !!(info.current) && (Reflect.has((info.current), 'display'))) {
              return (info.current.display)
            } else {
              return true
            }
          case 'waiting':
            if (info && !!(info.waiting) && (Reflect.has((info.waiting), 'display'))) {
              return (info.waiting.display)
            } else {
              return true
            }
        }

      }
    },

    //患者截取
    patientSlice() {
      return function (type) {
        let patient = Array();
        let {currPatient, waitPatient} = this.info;
        switch (type) {
          case 'currPatient':
            patient = currPatient.slice(0, 1)
            return this.$lodash.chunk(patient, 2)
          case 'waitPatient':
            patient = waitPatient.slice(0, 2);
            console.log(patient)
            return this.$lodash.chunk(patient, 2)
        }
      }
    }
  },

  mounted() {},

  methods: {
    handleClose() {
      console.log('关闭')
      this.$emit('handleCancel');
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
